<template></template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import shulin from "./shuling.png";
import yu from "./yu.png";
import { requestAnimationFrame } from "cesium";
export default {
  name: "parent-app",
  data() {
    return {
     
    };
  },
  created() {},
  mounted() {
    this.load();
   
    
  },
  methods: {
    /** 初始加载 */
    load() {
      // 创建场景对象Scene
      let scene = new THREE.Scene();

      // 树木
      let textureTree = new THREE.TextureLoader().load(shulin);
      console.log("textureTree", textureTree);

      let group1 = new THREE.Group();
      let num = 200;
      for (let i = 0; i < num; i++) {
        let spriteMaterial = new THREE.SpriteMaterial({
          map: textureTree,
        });
        let sprite = new THREE.Sprite(spriteMaterial);
        sprite.scale.set(100, 100, 1);
        let x = Math.random() - 0.5;
        let y = Math.random() - 0.5;
        sprite.position.set(1400 * x, 50, 1400 * y);

        group1.add(sprite);
      }

      // 雨滴
      let group2 = new THREE.Group();
      let textureYu = new THREE.TextureLoader().load(yu);
      let num2 = 6000;
      for (let i = 0; i < num2; i++) {
        let spriteMaterial = new THREE.SpriteMaterial({
          map: textureYu,
        });
        let sprite = new THREE.Sprite(spriteMaterial);
        sprite.scale.set(4, 5, 1);
        let x = Math.random() - 0.5;
        let y = Math.random() - 0.5;
        let z = Math.random() - 0.5;
        sprite.position.set(1800 * x, 1200 * z, 1800 * y);

        group2.add(sprite);
      }
      // 显示坐标系
      let axesHelper = new THREE.AxesHelper(200);
      scene.add(axesHelper);

      let planeGeometry = new THREE.PlaneGeometry(1500, 1500);

      let texture = new THREE.TextureLoader().load(
        "http://static.bimface.com/attach/1c257af511aa4617b30031913d58b79b_timg.jpg"
      );
      // 设置纹理的重复模式
      texture.wrapS = THREE.RepeatWrapping;
      texture.wrapT = THREE.RepeatWrapping;
      // uv两个方向纹理重复数量
      texture.repeat.set(10, 10);
      let material = new THREE.MeshLambertMaterial({
        map: texture,
        // color: 0x777700,
        side: THREE.DoubleSide,
      });

      let mesh = new THREE.Mesh(planeGeometry, material);
      mesh.rotateX(-Math.PI / 2);
      // scene.add(group);
      scene.add(mesh, group1, group2);

      // 点光源
      let pointLight = new THREE.PointLight(0xffffff);
      pointLight.position.set(60, 600, 640);
      scene.add(pointLight);
      // 平行光源
      // let directLight = new THREE.DirectionalLight(0xffffff, 1);
      // directLight.position.set(60, 600, 640);
      // scene.add(directLight);
      // 环境光
      let ambientLight = new THREE.AmbientLight(0x444444);
      scene.add(ambientLight);

      //相机
      let width = window.innerWidth;
      let height = window.innerHeight;
      let k = width / height;
      let s = 300;
      // let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
      // camera.position.set(850, 800, 800);
      /**透视投影相机对象*/
      let camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
      camera.position.set(292, 19, 238);
      camera.lookAt(scene.position);

      let renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

      function render() {
        group2.children.forEach((sprite) => {
          sprite.position.y -= 1;
          if (sprite.position.y < 0) {
            sprite.position.y = 700;
          }
        });
        // 执行渲染操作   指定场景、相机作为参数
        renderer.render(scene, camera);
        requestAnimationFrame(render);
      }
      render();
      /** --------------------鼠标控件对象--------------------- */
      // let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
      // controls.addEventListener("change", render); //监听鼠标、键盘事件
    },
  },
};
</script>

